<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>114_函数bind</title>
		<script>
			/* 
			根据函数调用方式的不同，this的值也不同:
				1.以函数形式调用，this是window;
				2。以方法形式调用，this是调用方法的对象;
				3.构造函数中，this是新建的对象;
				4.箭头函数没有自己的this，由外层作用域决定;
				5.通过call和apply调用的函数，它们的第一个参数就是函数的this;
				6。通过bind返回的函数，this由bind第一个参数决定(无法修改，call,apply也无法修改);
			
			bind( ) 是函数的方法，可以用来创建一个新的函数。
			  - bind可以为新函数绑定this。
			  -bind可以为新函数绑定参数；
			  
			箭头函数没有自身的this，它的this由外层作用域决定，
				-也无法通过call apply 和bind修改它的this.
				-箭头函数中没有arguments。
			 */
			function fn(a, b, c) {
				console.log("fn执行了....", this);
				console.log(a, b, c);
			}
			const obj = {
				name: "孙悟空"
			}
			let newFn = fn.bind(obj) //this是obj。
			/* 
			绑定this和a，b两个参数，无论newFn中a和b怎么传参，都是a=10，b=20。
			注意：绑定参数只针对的是newFn，不是
			 */
			newFn = fn.bind(obj, 10, 20)
			newFn(13, "hello"); //10 20 13 //无论怎么传参，都是a=10,b=20

			//箭头函数
			const arrowFn = () => {
				console.log("箭头函数", this);
			}
			arrowFn() //this是window
			arrowFn.call(obj) //this仍然是window

			const newArrowFn = arrowFn.bind(obj)
			newArrowFn(); ////this仍然是window

			//在类中定义箭头函数
			class MyClass {
				fn = () => {
					console.log("类中箭头函数", this);
				}
			}
			const myclass = new MyClass();
			myclass.fn(); //this外层作用域是MyClass，this就是myclass
			myclass.fn.call(window) //this仍然是myclass

			const myClassArrow = myclass.fn.bind(window)
			myClassArrow(); //this仍然是myclass
		</script>
	</head>
	<body>
	</body>
</html>